<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="填写题目信息" name="first">
        
<el-form ref="form" :model="data.qution" label-width="80px">
  <el-form-item label="题目名称">
    <el-input v-model="data.qution.name"></el-input>
  </el-form-item>
  <el-form-item label="题目描述">
    <el-input v-model="data.qution.descr" ></el-input>
  </el-form-item>
  
  <el-form-item  label="难度">
    <el-select v-model="data.qution.region" placeholder="选择该题难度">
      <el-option label="简单" value="简单"></el-option>
      <el-option label="中等" value="中等"></el-option>
      <el-option label="困难" value="困难"></el-option>
      <el-option label="入门" value="入门"></el-option>
    </el-select>
  </el-form-item>
 

</el-form>

    </el-tab-pane>
    <el-tab-pane label="填写函数模板" name="second">
      <el-collapse v-model="activeNames2" @change="handleChange">
            <el-collapse-item title="填写Java练习函数" name="1">
            <edit :code="this.data.tempter.Java"></edit>
            </el-collapse-item>
            <el-collapse-item title="填写Python3测试函数" name="2">
                <edit :code="this.data.tempter.Python3"></edit>
            </el-collapse-item> 
      </el-collapse>

    </el-tab-pane>

  
    <el-tab-pane label="填写测评模板" name="third">
        <el-result icon="warning" style="height:10%" title="警告提示" subTitle="你无需添加命名空间 头文件！！！">

    </el-result>
       <el-collapse v-model="activeNames2" accordion>
  <el-collapse-item title="填写java测评函数" name="1">
    <edit :code="this.data.head.Java"></edit>
   </el-collapse-item>
   <el-collapse-item title="填写Python3测评函数" name="2">
    <edit :code="this.data.head.Python3"></edit>
   </el-collapse-item>
</el-collapse>
    </el-tab-pane>
    <el-tab-pane label="填写测试数据" name="fourth">
      <label>输入数据</label>
        <el-input type="textarea" v-model="data.qution.input"></el-input>
    <label>输出数据</label>
       <el-input type="textarea" v-model="data.qution.rusult"></el-input>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>

    </el-tab-pane>
  </el-tabs>


  

</template>

<script>
import qs from 'qs'
import Edit from '../Edit.vue';
  export default {
  components: { Edit },
    data() {
      return {
        activeName: 'first',
        activeNames: ['1'],
        activeNames2: ['1'],
        data:{qution:{name:"",descr:"",region:"",input:"",result:""},tempter:{},head:{}}
      }
    },
    mounted(){
      this.data.tempter.Java="import java.util.ArrayList;\n"+
      "import java.util.List;\n"+
      "public class test {\n"+
      "public static List<Integer> test(){\n"+
      "}\n"+
      "}\n"
      this.data.tempter.Python3="def test():\n"+
      "   pass"
      this.data.head.Java="public static void main(String[] args) {System.out.println(test());}"
      this.data.head.Python3="print(test())"
   
    },
    methods: {
      onSubmit() {
        this.$postRequest("/admin/addQution",qs.parse(this.data)).then(res=>{
          console.log(res)
        });
       
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

<style>

</style>